<template>
  <div class="development-page">
    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="development-container">
        <!-- 加载动画 -->
        <div class="loader">
          <div class="spinner"></div>
        </div>

        <!-- 提示信息 -->
        <div class="message">
          <h1>功能开发中</h1>
          <p>我们正在努力开发这个功能，敬请期待！</p>
          <!-- 预计时间显示修改 -->
          <p class="estimated-time">预计完成时间: {{ formatDate(estimatedTime) }}</p>

          <!-- 新增剩余时间显示 -->
          <div class="remaining-time" v-if="daysRemaining >= 0">
            <p><i class="far fa-calendar-alt"></i> 预计还剩 {{ daysRemaining }} 天完成</p>
          </div>
          <div class="remaining-time overdue" v-else>
            <p><i class="fas fa-exclamation-triangle"></i> 已超过预计完成时间</p>
          </div>

          <!-- 功能进度 -->
          <div class="progress-section">
            <h3>开发进度</h3>
            <div class="progress-bar">
              <div class="progress" :style="{ width: progress + '%' }"></div>
            </div>
            <p class="progress-text">{{ progress.toFixed(1) }}% 已完成</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '2025-8-25', // 新增：项目开始日期
      estimatedTime: '2025-12-31', // 修改：明确预计完成日期格式
      showContactInfo: false,
      progress: 0, // 修改：改为动态计算
      daysRemaining: 0 // 新增：剩余天数
    }
  },
  mounted() {
    this.calculateProgress()
  },
  methods: {
    // 新增：格式化日期显示
    formatDate(dateString) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(dateString).toLocaleDateString('zh-CN', options)
    },

    // 新增：计算进度和剩余天数
    calculateProgress() {
      const start = new Date(this.startDate)
      const end = new Date(this.estimatedTime)
      const now = new Date()

      const totalDays = (end - start) / (1000 * 60 * 60 * 24)
      const elapsedDays = (now - start) / (1000 * 60 * 60 * 24)

      const progress = (elapsedDays / totalDays) * 100
      this.progress = progress > 100 ? 100 : progress < 0 ? 0 : progress
      this.daysRemaining = Math.ceil((end - now) / (1000 * 60 * 60 * 24))
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.development-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: #f5f7fa;
}

/* 主要内容样式 */
.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.development-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  padding: 3rem;
  width: 100%;
  max-width: 600px;
  text-align: center;
  transition: transform 0.3s ease;
}

.development-container:hover {
  transform: translateY(-5px);
}

/* 加载动画样式 */
.loader {
  margin-bottom: 2rem;
}

.spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 消息样式 */
.message h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.message p {
  color: #7f8c8d;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.estimated-time {
  color: #e67e22;
  font-style: italic;
}

/* 进度条样式 */
.progress-section {
  margin: 2rem 0;
}

.progress-section h3 {
  color: #34495e;
  margin-bottom: 0.8rem;
}

.progress-bar {
  height: 10px;
  background-color: #ecf0f1;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress {
  height: 100%;
  background-color: #3498db;
  border-radius: 5px;
  transition: width 1s ease-in-out;
}

.progress-text {
  color: #3498db;
  font-weight: bold;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {

  .development-container {
    padding: 2rem 1rem;
  }

  .message h1 {
    font-size: 1.5rem;
  }
}

/* 剩余时间样式 */
.remaining-time {
  color: #27ae60;
  margin: 1rem 0;
  font-weight: 500;
}

.remaining-time.overdue {
  color: #e74c3c;
}
</style>
